<template>
  <div>
     <div class="Navbar">
      <div class="navlink">
        <div v-for="item in barList" :key="item.index" :data="barList" >
          <router-link :to="{path:item.url}">
            <div :class="activeIndex == item.url ? 'active':'nomal'" @click="handleLink(item.url)">{{item.title}}
              <img v-if="activeIndex == item.url" src="../../assets/images/bottomline.png" style="width:0.7rem;height: 0.2rem;opacity: 1;margin-top: -0.62rem;">
            </div>
          </router-link>
        </div>
      </div>
     </div>
  </div>
</template>
<script>
export default {
  name:"Navbar",
  data() {
    return {
      barList:[
        {title:'校园总览',url:'/'},
        {title:'后勤数据',url:'/logistics'},
        {title:'视频监控',url:'/monitor'},
        {title:'监课教室',url:'/classroom'},
        {title:'资产分析',url:'/assetAnalysis'},
        {title:'办公数据',url:'/officeData'},
        {title:'一卡通',url:'/oneCardSolution'},
      ]
    };
  },
  methods: {
    handleLink(url) {
	    this.$router.push({ path: url })
	  }
  },
  computed:{
    activeIndex() {
	    return this.$route.path
	  },
  },
  mounted() {},
};
</script>
<style>
.Navbar {
  background-color: #06c;
  background: url(../../assets/images/navbar.png);
  background-repeat: no-repeat;
  background-size: 96% 115%;
  text-align: center;
  /* opacity: 0.4; */
  height: 0.56rem;
  /* margin: -0.4rem 0 0 5.3rem; */
  position: relative;
  z-index: 10;
  margin-left: 0.3rem;
  animation: showNavbar 1s;
}
@keyframes showNavbar {
  from {
    bottom: -200rem;
  }
  to {
    bottom: 0;
  }
}
.navlink{
  /* background-color: aquamarine; */
  width: 10rem;
  height: 0.5rem;
  margin-left: 0.32rem;
}
.active{
  color:#7FF7FE;
  background-color: rgb(21,80,102,.5);
  width: 10.22%;
  height: 0.6rem;
  text-align: center;
  float: left;
  margin: 0.04rem 0.1rem 0 0.1rem;
  font-size: 0.18rem;
  line-height: 0.5rem;
}
.nomal{
  color:#7FF7FE;
  /* background-color: rgb(21,80,102,.5); */
  width: 10.22%;
  height: 0.6rem;
  text-align: center;
  float: left;
  margin: 0.04rem 0.1rem 0 0.1rem;
  font-size: 0.18rem;
  line-height: 0.5rem;
}
</style>